<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="https://blz.nosdn.127.net/1/overwatch/images/common/overwatch.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/wuzi.css">
    <link rel="stylesheet" href="./fonts/zmy_font/iconfont.css">

</head>

<body>
    <!-- 1、顶部导航栏模块 begin -->
    <div class="top">
        <nav class="desktop">
            <div class="desktop_left">
                <!-- logo模块 -->
                <a href="#" class="desktop_logo"></a>
                <!-- 左侧菜单栏模块 -->
                <div class="desktop_items">
                    <ul>
                        <li>
                            <a href="#" class="active">游戏<i class="iconfont"></i></a>
                        </li>
                        <li><a href="#">商城</a></li>
                        <li><a href="#">新闻</a></li>
                        <li><a href="#">电子竞技<i class="dropdown"></i></a></li>
                        <li><a href="#">积分福利</a></li>
                    </ul>
                </div>
            </div>
            <!-- 右侧菜单栏模块 -->
            <div class="desktop_profileItems">
                <ul>
                    <li><a href="#"><span></span> 未成年人家长监护</a></li>
                    <li><a href="#">支持</a></li>
                    <li><a href="#">我的账户<i class="dropdown"></i></a></li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- 1、顶部导航栏模块 end -->

    <!-- 2、固定定位导航栏模块 begin -->
    <nav class="menu">
        <div class="menu_left">
            <a href="#" class="menu_logo"></a>
            <a href="#" class="menu_pic">
                <i class="iconfont icon-fenlei-shouwangxianfeng"></i>
            </a>
            <ul class="menu_downList">
                <li data-menu="0">
                    游戏<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <div class="dropdown_menu_arrow"></div>
                        <div class="dropdown_menu_content">
                            <a href="./index.html">概述</a>
                        </div>
                    </div>
                </li>
                <li onclick="window.location.href='./heroes.html'">英雄</li>
                <li onclick="window.location.href='./crx.html'">第1赛季</li>
                <li data-menu="1">
                    新闻<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <!-- 隐藏的悬浮下拉列表的三角形 -->
                        <div class="dropdown_menu_arrow"></div>
                        <!-- 隐藏的悬浮下拉列表的内容 -->
                        <div class="dropdown_menu_content">
                            <a href="./ymx.html">新闻</a>
                            <a href="./zll.html">补丁</a>
                        </div>
                    </div>
                </li>
                <li onclick="window.location.href='./media.html'">视频图片</li>
                <li data-menu="2">
                    社区<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <!-- 隐藏的悬浮下拉列表的三角形 -->
                        <div class="dropdown_menu_arrow"></div>
                        <!-- 隐藏的悬浮下拉列表的内容 -->
                        <div class="dropdown_menu_content">
                            <a href="./zs.html">论坛<i class="iconfont icon-youshangjiantou"></i></a>
                            <dl>
                                <dt>电子竞技</dt>
                                <dd>守望先锋挑战者选拔赛<i class="iconfont icon-youshangjiantou"></i></dd>
                                <dd>守望先锋挑战者系列赛<i class="iconfont icon-youshangjiantou"></i></dd>
                                <dd>守望先锋联赛<i class="iconfont icon-youshangjiantou"></i></dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li data-menu="3">
                    商城<i class="iconfont icon-xiangxiajiantou"></i>
                    <!-- 隐藏的悬浮下拉列表 -->
                    <div class="dropdown_menu">
                        <!-- 隐藏的悬浮下拉列表的三角形 -->
                        <div class="dropdown_menu_arrow"></div>
                        <!-- 隐藏的悬浮下拉列表的内容 -->
                        <div class="dropdown_menu_content">
                            <a href="#">商城<i class="iconfont icon-youshangjiantou"></i></a>
                            <dl>
                                <dt></dt>
                                <dd onclick="window.location.href='./jzx.html'">
                                    《守望先锋联赛》
                                    <p>个性化物品</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="menu_download">
            <a href="#">下载游戏</a>
        </div>
    </nav>
    <!-- 2、固定定位导航栏模块 end -->
    <!-- 第一部分 简介 技能 -->
    <div class="main-content">
        <!-- 介绍 -->
        <div class="pageHeader">
            <!-- .左边介绍 -->
            <div class="section">
                <!-- 头部 -->
                <div class="section-header">
                    <!-- 名字 -->
                    <div class="header-name">雾子</div>
                    <div class="header-des">家守雾子是铁坂神社的打理人，也是一名出色的忍者和医师。在岛田家族没落之后，她立誓要从无恶不作的桥元家族手中保护自己的家乡。</div>
                </div>
                <!-- 技能图标 -->
                <div class="header-icon mt32">
                    <div class="img-wrap">
                        <img src="https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Support.svg" alt="">

                    </div>
                    <p>支援</p>

                </div>
                <div class="header-icon">
                    <div class="img-wrap">
                        <img src="https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Location.svg" alt="">

                    </div>
                    <p>日本，铁坂</p>
                </div>
            </div>
        </div>
        <!-- 技能 -->
        <div class="abilities">
            <h2 class="comon-title mb48">技能</h2>
            <div class="ab-list">
                <div class="control">
                    <!-- 五个技能 -->
                    <div class="ab_flex">
                        <!-- 符 -->
                        <div class="ab_wrap">
                            <div class="ab_img active">
                                <img data-id="1"
                                    src="https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_kiriko_6b8830bd7173de38016ef129e117ac6f418026a6ec4501ab5cb7cdd99bd6f5b8.png">
                            </div>
                            <div class="ab_name">符</div>
                        </div>
                        <!-- 锥 -->
                        <div class="ab_wrap">
                            <div class="ab_img">
                                <img data-id="2"
                                    src="https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_kiriko_dd7da4b0caa30dafaa3359c902b31866e547f9a1ea7952d7f536e1671d47d9bd.png"
                                    alt="">
                            </div>
                            <div class="ab_name">锥</div>
                        </div>
                        <!-- 瞬 -->
                        <div class="ab_wrap">
                            <div class="ab_img">
                                <img data-id="3"
                                    src="https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_kiriko_e6ed3a36c4ed15b2127d6ca74756b25e0db7cf33ce7e26d9a79fd821526f055f.png"
                                    alt="">
                            </div>
                            <div class="ab_name">瞬</div>
                        </div>
                        <!-- 铃 -->
                        <div class="ab_wrap">
                            <div class="ab_img"><img data-id="4"
                                    src="https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_kiriko_3775c37a363e1aaf02a6df4cdfb611f18e38bb69ce42dd59abddb4140cea9790.png"
                                    alt=""></div>
                            <div class="ab_name">铃</div>
                        </div>
                        <!-- 狐 -->
                        <div class="ab_wrap">
                            <div class="ab_img"><img data-id="5"
                                    src="https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_kiriko_f29fd68592d73f20da39d783e0e2f86dcc65c311912d3284062d2bd1a8aa1c52.png"
                                    alt=""></div>
                            <div class="ab_name">狐</div>
                        </div>
                    </div>

                </div>

            </div>
            <!-- 对应技能视频展示 -->
            <div class="ac">
                <div class="item active">
                    <div class="ab_detail">
                        <div class="ab_video">
                            <video autoplay loop muted>
                                <source type="video/mp4"
                                    src="https://blz-videos.nosdn.127.net/2/ow2/heroes/OVERWATCH_WEBSITE_CHARACTER_CAPTURE_KirikoHealingOfuda_WEB_16x9_1920x1080p30_H264.mp4">
                            </video>
                        </div>
                    </div>
                    <div class="ab_des ">引导一串能自动飞向目标 盟友的治疗护身符</div>
                </div>
                <div class="item">
                    <div class="ab_detail">
                        <div class="ab_video">
                            <video autoplay loop muted>
                                <source type="video/mp4"
                                    src="https://blz-videos.nosdn.127.net/2/ow2/heroes/OVERWATCH_WEBSITE_CHARACTER_CAPTURE_KirikoKunai_WEB_16x9_1920x1080p30_H264.mp4">
                            </video>
                        </div>
                    </div>
                    <div class="ab_des">投出能造成额外爆击伤害的苦无</div>
                </div>
                <div class="item">
                    <div class="ab_detail ">
                        <div class="ab_video">
                            <video autoplay loop muted>
                                <source type="video/mp4"
                                    src="https://blz-videos.nosdn.127.net/2/ow2/heroes/OVERWATCH_WEBSITE_CHARACTER_CAPTURE_KirikoSwiftStep_WEB_16x9_1920x1080p30_H264.mp4">
                            </video>
                        </div>
                    </div>
                    <div class="ab_des">瞬移至一名盟友身旁</div>
                </div>
                <div class="item">
                    <div class="ab_detail ">
                        <div class="ab_video">
                            <video autoplay loop muted>
                                <source type="video/mp4"
                                    src="https://blz-videos.nosdn.127.net/2/ow2/heroes/OVERWATCH_WEBSITE_CHARACTER_CAPTURE_KirikoProtectionSuzu_WEB_16x9_1920x1080p30_H264.mp4">
                            </video>
                        </div>
                    </div>
                    <div class="ab_des">投出一枚护身铃铛，使盟友在短时间内 变为无敌状态，并净化大部分负面效果</div>
                </div>
                <div class="item">
                    <div class="ab_detail ">
                        <div class="ab_video">
                            <video autoplay loop muted>
                                <source type="video/mp4"
                                    src="https://blz-videos.nosdn.127.net/2/ow2/heroes/OVERWATCH_WEBSITE_CHARACTER_CAPTURE_KirikoKitsuneRush_WEB_16x9_1920x1080p30_H264.mp4">
                            </video>
                        </div>
                        <div class="ab_des ">召唤一只灵狐冲向前方，为置身路径中的盟友提高移动速度、攻击速度和技能冷却速度</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二部分  故事 -->
        <div class="story">
            <!-- 背景大图 -->
            <!-- <div class="section-bg gl">
            <img src="https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/1600_Origin_Story.jpg" alt="">
        </div> -->
            <!-- 英雄 故事-->
            <div class="section-story">
                <h2 class="comon-title">英雄故事</h2>
                <div class="story_detail">
                    雾子师承母亲——朝，习得了致命的忍术。岛田家族衰亡后，敌对的桥元家族将雾子的父亲挟为人质。为了保护雾子，她被送去和外婆生活，外婆则教会了她愈疗之术。多年后，雾子重返故土，誓要让民众摆脱桥元家族的魔爪。
                </div>
                <div class="video">
                    <video controls="controls" muted="" loop=""
                        poster="https://overwatch.nosdn.127.net/a/images/2022/9/20/9bf66e8161bbc51bb0a86c32dbfb5ca1.png"
                        preload="auto" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow"
                        airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true"
                        x5-video-orientation="portrait" class="hero-showcase-video">
                        <source type="video/mp4"
                            src="https://blz-videos.nosdn.127.net/1/OverWatch/Overwatch_Kiriko_OriginStory_CADPA_wy3m025t5v8a.mp4 ">
                    </video>

                </div>
            </div>
        </div>

        <!-- 第三部分 更多英雄 -->
        <div class="heroes-content">
            <div class="section-bg gl">
                <img src="https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/2600_Related_Heroes.jpg" alt="">
            </div>
            <h2 class="comon-title">其他支援英雄</h2>
            <div class="list-warp">
                <div class="hero-list"></div>

            </div>
            <a href="heroes.html" class="all-heroes" target="_blank">查看全部英雄</a>
        </div>

        <!-- 第四部分 底部大图 -->
        <div class="closing-background">
            <div class="closing">
                <div class="content">
                    <div class="header">
                        <h2 class="heading">这个未来值得为之奋战。 加入我们！</h2>
                        <a href="https://ow.blizzard.cn/" class="btn-primary isDesktop">下载游戏</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 3、底部模块制作 begin -->
        <footer>
            <!-- 推广模块 -->
            <div class="socialFooter">
                <p class="txt">关注《守望先锋》“归来”</p>
                <!-- 图标列表 -->
                <ul class="list">
                    <li>
                        <a href="https://weibo.com/u/5346440662">
                            <i class="iconfont icon-xinlangweibo"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-weixin"></i>
                            <p class="img">
                                <img src="https://blz.nosdn.127.net/1/ow2/home/weixin.jpg" alt="">
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-bilibili"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-douyin"></i>
                            <p class="img douyin-img">
                                <img src="https://blz.nosdn.127.net/1/ow2/home/douyin.jpg" alt="">
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="xiaohongshu">
                            <p class="img">
                                <img src="https://blz.nosdn.127.net/1/ow2/home/redbook.png" alt="">
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 版权模块 -->
            <div class="footer">
                <!-- 商业合作模块 -->
                <div class="footer_business">
                    <ul class="clearfix">
                        <li><span class="icon icon1"></span>在线客服</li>
                        <li><span class="icon icon2"></span>反馈</li>
                        <li><span class="icon icon3"></span>加入我们</li>
                    </ul>
                </div>
                <!-- 版权信息模块 -->
                <div class="cprt">
                    <a href="" class="footer_logo"></a>
                    <a href="" class="footer_origin"></a>
                    <div class="footer_info">
                        <ul class="clearfix">
                            <li><a href="#">隐私</a>|</li>
                            <li><a href="#">法律</a>|</li>
                            <li><a href="#">条款</a>|</li>
                            <li><a href="#">API</a></li>
                        </ul>
                        <p>
                            ©2022 暴雪娱乐有限公司版权所有
                            <span>由上海网之易网络科技发展有限公司运营</span>
                            <span> | </span>
                            <span>新广出审[2016]378号</span>
                        </p>
                        <p>
                            <span>文网游进字[2016]0025号</span>
                            <span> | </span>
                            <a href="#">增值电信业务经营许可证编号：沪B2－20080012</a>
                            <span> | </span>
                            <a href="#">沪ICP备：沪B2－20080012－15</a>
                        </p>
                        <p>
                            互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502052167号
                            <span> | </span>
                            <a href="#">上海市网络游戏行业自律公约</a>
                        </p>
                        <p>
                            <a href="#">
                                <img src="https://blz.nosdn.127.net/1/frame/cprt/zx110.png" alt="">
                            </a>
                            <a href="#">
                                <img src="https://blz.nosdn.127.net/1/frame/cprt/sgs-icon.png" alt="">
                            </a>
                            <a href="#">
                                <img src="https://blz.nosdn.127.net/1/frame/cprt/icon20120516.png" alt="">
                            </a>
                            <span>| 适龄提示：适合13岁及以上使用 </span>
                            <a href="#">家长监护工程</a>
                            <span> | </span>
                            <a href="#">网上有害信息专区</a>
                        </p>
                    </div>
                </div>
                <!-- 脚注 -->
                <div class="footer_tips">
                    <p>
                        积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。
                        <br />
                        健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                    </p>
                </div>
            </div>
        </footer>
        <!-- 3、底部模块制作 end -->
        <script src="./js/common.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/wuzi.js"></script>
</body>

</html>